<script setup lang="ts">
import type {CollapseModelValue} from 'element-plus'


const info: Ref<SystemInfo | undefined> = ref(undefined)

onMounted(function () {
  cFetch<SystemInfo>('/system/static', {
    auth: true,
    defaultOpts: {
      method: "GET"
    }
  }).then(res => {
    if (res.code === 200) info.value = res.data
  })
})

const activeNames = ref(['1','2','3','4'])
const handleChange = (val: CollapseModelValue) => {
  console.log(val)
}
</script>

<template>
  <div class="demo-collapse">
    <el-collapse v-model="activeNames" @change="handleChange">
      <el-collapse-item title="Java 信息" name="1">
        <div class="content">

          <span>
            <el-text>Java运行时名称：</el-text>
            <el-text type="primary">{{ info?.javaRuntimeName }}</el-text>
          </span>

          <span>
            <el-text>Java运行时版本：</el-text>
            <el-text type="primary">{{ info?.javaRuntimeVersion }}</el-text>
          </span>

          <span>
            <el-text>Java目录：</el-text>
            <el-text type="primary">{{ info?.javaHomeDir }}</el-text>
          </span>

        </div>

      </el-collapse-item>
      <el-collapse-item title="服务器用户信息" name="2">
        <div class="content">
          <span>
            <el-text>用户名：</el-text>
            <el-text type="primary">{{ info?.userName }}</el-text>
          </span>
          <span>
            <el-text>用户语言：</el-text>
            <el-text type="primary">{{ info?.userLanguage }}</el-text>
          </span>
          <span>
            <el-text>用户当前目录：</el-text>
            <el-text type="primary">{{ info?.userCurrentPath }}</el-text>
          </span>

        </div>
      </el-collapse-item>
      <el-collapse-item title="操作系统信息" name="3">
        <div class="content">
          <span>
            <el-text>操作系统：</el-text>
            <el-text type="primary">{{ info?.osname }}</el-text>
          </span>

          <span>
            <el-text>系统架构：</el-text>
            <el-text type="primary">{{ info?.osarch }}</el-text>
          </span>

          <span>
            <el-text>操作系统版本：</el-text>
            <el-text type="primary">{{ info?.osversion }}</el-text>
          </span>

        </div>
      </el-collapse-item>
      <el-collapse-item title="Java虚拟机信息" name="4">
        <div class="content">
          <span>
            <el-text>JVM供应商：</el-text>
            <el-text type="primary">{{ info?.jvmvendor }}</el-text>
          </span>

          <span>
            <el-text>JVM信息：</el-text>
            <el-text type="primary">{{ info?.jvminfo }}</el-text>
          </span>

          <span>
            <el-text>JVM名称：</el-text>
            <el-text type="primary">{{ info?.jvmname }}</el-text>
          </span>

          <span>
            <el-text>JVM版本：</el-text>
            <el-text type="primary">{{ info?.jvmversion }}</el-text>
          </span>

        </div>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<style scoped lang="scss">
.content {
  display: flex;
  flex-direction: column;

}
</style>